<template>
  <div>
    <el-container>
      <el-header>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item index="1" ref=""> 上传扫描图片 </el-menu-item>
          <el-menu-item index="2"> 模型交互 </el-menu-item>
          <!-- <el-menu-item index="3"> 点云编辑 </el-menu-item> -->
        </el-menu>
      </el-header>
      <el-main>
        <div
          style="display: flex; justify-content: center; align-items: center"
        >
          <el-form ref="form" style="width: 50%">
            <el-form-item label="分组名称">
              <el-input v-model="groupName" ref="group_name"></el-input>
            </el-form-item>
            <el-form-item label="模型名称">
              <el-input v-model="modelName" ref="model_name"></el-input>
            </el-form-item>
          </el-form>
        </div>

        <el-upload
          class="upload-demo"
          ref="upload"
          :limit="fileLimit"
          :action="uploadUrl"
          :on-exceed="handleExceed"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :before-upload="beforeUpload"
          :http-request="customHttpRequest"
          :file-list="fileList"
          :auto-upload="false"
         
        >
          <el-button slot="trigger" size="small" type="primary"
            >选取文件</el-button
          >
          <el-button
            style="margin-left: 10px"
            size="small"
            type="success"
            @click="submitUpload"
            >上传到服务器</el-button
          >
          <div slot="tip" class="el-upload__tip">只能上传zip文件</div>
        </el-upload>
      </el-main>
    </el-container>
  </div>
</template>

  <script>
import axios from "axios";
export default {
  data() {
    return {
      uploadUrl: "http://192.168.1.103:8080/upload_file",
      activeIndex: "1",
      fileLimit: 1,
      groupName: "分组一",
      modelName: "模型一",
      fileList: [
        // {
        //   name: "food.jpeg",
        //   url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        // },
        // {
        //   name: "food2.jpeg",
        //   url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        // },
      ],
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      let index2path = ["/upload", "/render", "/pointcloudedit"];
      if (index2path[key - 1] != "/upload")
        this.$router.push({
          path: index2path[key - 1],
        });
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    handleRemove(file, fileList) {
      console.log(file.name, fileList.length);
    },
    handlePreview(file) {
      console.log(file.name);
    },
    beforeRemove(file, fileList) {
      console.log(fileList.length);
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    customHttpRequest(item) {
      console.log(item);
      const formData = new FormData();
      //后面可能还需要添加模型名字
      formData.append("groupName", this.$refs.group_name.value);
      formData.append("modelName", this.$refs.model_name.value);
      formData.append("file", item.file);

      axios
        .post(this.uploadUrl, formData, {
          headers: {
            "Content-Type": "multipart/form-data", // 设置enctype属性
          },
        })
        .then((response) => {
          console.log(response);
          alert(response.data.data);
        })
        .catch(() => {
          alert("上传文件失败,请联系管理员处理");
        });
    },
    beforeUpload(file) {
      console.log(file);
      //check type
      const isZip = file.type === "application/zip"; // 检查 MIME 类型
      const extension = file.name.split(".").pop(); // 获取文件的扩展名

      const isAllowedExtension = extension.toLowerCase() === "zip"; // 检查扩展名

      if (!(isZip || isAllowedExtension)) {
        this.$message.error("只能上传 ZIP 文件");
        return false;
      }
      //check model name and group name
      if (
        this.$refs.group_name.value === "" ||
        this.$refs.model_name.value === ""
      ) {
        this.$message.error("请先输入分组名和模型名");
        return false;
      }
      
      //load file
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);

        reader.onload = (e) => {
          const dataURL = e.target.result;
          file.dataURL = dataURL;

          resolve(file);
        };

        reader.onerror = (error) => {
          reject(error);
        };
      });
    },
  },
};
</script>
  <style>
</style>